<template>
  <div class="page-container">
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          :inline="true"
          label-position="left"
          @submit.prevent
        >
          <el-form-item :label="$t('dept.name')" prop="name">
            <el-input
              v-model="queryParams.name"
              :placeholder="$t('dept.nameTip')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('status')" prop="status">
            <el-select
              v-model="queryParams.status"
              :placeholder="$t('select')"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 140px"
            >
              <el-option :label="$t('enabled')" value="1" />
              <el-option :label="$t('disabled')" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('createTime')" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              type="daterange"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{
              $t("query")
            }}</el-button>
            <el-button @click="reset">{{ $t("reset") }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div class="tool-controls">
      <el-button type="primary" plain :icon="Plus" @click="handleAdd">{{
        $t("add")
      }}</el-button>
    </div>

    <el-table v-loading="loading" :data="lists" :border="true">
      <el-table-column
        :label="$t('dept.deptId')"
        align="center"
        prop="deptId"
        width="140"
      />
      <el-table-column :label="$t('dept.name')" align="center" prop="name" />
      <el-table-column
        :label="$t('dept.description')"
        align="center"
        prop="description"
      />
      <el-table-column
        :label="$t('status')"
        align="center"
        prop="status"
        width="100"
      >
        <template #default="scope">
          <el-text v-if="scope.row.status == '1'" type="success">{{
            $t("enabled")
          }}</el-text>
          <el-text v-else type="danger">{{ $t("disabled") }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('createTime')"
        align="center"
        prop="createTime"
        width="180"
      />
      <el-table-column
        :label="$t('handle')"
        align="center"
        class-name="small-padding fixed-width"
        width="160"
      >
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">{{
            $t("edit")
          }}</el-button>
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row)"
            >{{ $t("delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="lists.length > 0"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="lists.length"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>

  <!--新增修改-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="460px">
    <el-form ref="userForm" :model="deptInfo" :rules="rules" label-width="auto">
      <el-form-item :label="$t('dept.name')" prop="name">
        <el-input v-model="deptInfo.name" :placeholder="$t('dept.nameTip')" />
      </el-form-item>
      <el-form-item :label="$t('dept.description')" prop="description">
        <el-input
          type="textarea"
          v-model="deptInfo.description"
          :placeholder="$t('dept.descriptionTip')"
        />
      </el-form-item>
      <el-form-item :label="$t('status')" prop="status">
        <el-radio-group v-model="deptInfo.status">
          <el-radio label="1">{{ $t("enabled") }}</el-radio>
          <el-radio label="0">{{ $t("disabled") }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        $t("confirm")
      }}</el-button>
      <el-button @click="dialogVisible = false">{{ $t("cancel") }}</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "#imports";
import { useI18n } from "#imports";
import type { FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import dayjs from "dayjs";

const { t } = useI18n();

definePageMeta({
  title: "部门管理",
  en_title: "Department Management",
  zh_hk_title: "部門管理",
  ssr: true, // 必须为 true
  isTokenCheck: true,
});

interface QueryParams {
  name: string;
  status: string;
  createTime: Array<string>;
}

interface DeptModel {
  deptId: string;
  name: string;
  description: string;
  status: string;
  createTime: string;
}

const queryParams: Ref<QueryParams> = ref({
  name: "",
  status: "",
  createTime: [],
});

const handleQuery = () => {};

const reset = () => {
  queryParams.value = {
    name: "",
    status: "",
    createTime: [],
  };
};

const dialogVisible = ref(false);
const deptInfo: Ref<DeptModel> = ref({
  deptId: "",
  name: "",
  description: "",
  status: "",
  createTime: "",
});
const rules = reactive<FormRules>({
  name: [{ required: true, message: t("dept.nameTip"), trigger: "blur" }],
  status: [{ required: true, message: t("select"), trigger: "change" }],
});
const dialogTitle = ref("");
const operateType = ref("");
const handleAdd = () => {
  dialogVisible.value = true;
  operateType.value = "add";
  dialogTitle.value = t("add");
  deptInfo.value = {
    deptId: Date.now().toString(),
    name: "",
    description: "",
    status: "",
    createTime: "",
  };
};

const handleEdit = (row: DeptModel) => {
  dialogVisible.value = true;
  operateType.value = "edit";
  dialogTitle.value = t("edit");
  deptInfo.value = row;
};

const submitForm = () => {
  if (operateType.value === "add") {
    lists.value.push({
      ...deptInfo.value,
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    });
  } else if (operateType.value === "edit") {
    const deptId = deptInfo.value.deptId;
    lists.value = lists.value.map((item: any) => {
      if (item.deptId === deptId) {
        return deptInfo.value;
      }
      return item;
    });
  }
  dialogVisible.value = false;
};

const handleDelete = (row: DeptModel) => {
  const deptId = row.deptId;
  lists.value = lists.value.filter((item: any) => item.deptId !== deptId);
};

const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const lists: any = ref([
  {
    deptId: "1",
    name: "部门1",
    description: "部门1描述",
    status: "1",
    createTime: "2022-01-01 00:00:00",
  },
  {
    deptId: "2",
    name: "部门2",
    description: "部门2描述",
    status: "1",
    createTime: "2022-01-01 00:00:00",
  },
  {
    deptId: "3",
    name: "部门3",
    description: "部门3描述",
    status: "0",
    createTime: "2022-01-01 00:00:00",
  },
]);

const handleSizeChange = (val: number) => {};
const handleCurrentChange = (val: number) => {};
</script>
